import React, { Component } from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import util from "@/common/util"
import layer from '@/common/layer'
import jquerydate from '@/common/jquerydate'
import Sel1View from '@/components/sel1'
import RadioPicker2 from '@/components/RadioPicker2'
import RadioPicker1 from '@/components/RadioPicker1'
import Picker from '@/components/picker'
import jquery from 'jquery';

class Declar extends Component {
    constructor(props) {
        super()
        this.state = {
            declardata:'',
            endreason:'',
            endid:'',
            ddtime:[],
            idcardimg:[],
            creditimg:[],
            productType:['房押','车贷','信用贷','保单贷','公积金贷'],
            marry:['已婚','未婚','离异'],
            work:['法人','股东','雇员'],
            housePay:['全款','按揭'],
            houseType:['商品房','房改房','经适房','动迁房','其他房产类'],
            houseMortgage:['一押','二押'],
        }
    }

    componentDidMount() {
        this.lookdoc()
        this.getddtime()
       
         jquery(".previewbox").on('click',function(){
             jquery(this).hide()
         })
    }

    async goedit(e) {
        window.location.href = `./deprogedit.html?id=` + util.getQuery().id + "&apply=" + util.getQuery().apply;
    }

   //获取报单数据 
    async lookdoc() {
        let res = await util.rjax({
            url: '/otherProductApply/getApplyInfoById?applyId='+ util.getQuery().apply,
            type: "get"
        })
        if (res) {
            this.setState({ declardata: res.data })
            jquery(".loantype"+res.data.productType).show()
            this.setState({creditimg: res.data.credit.split(/;/g)})
            this.setState({idcardimg: res.data.idCard.split(/;/g)})
             if(res.data.houseMortgage==0){//一押显示一押需求金额，二押显示一押余额
                jquery(".oneya").show()
            }else{
                 jquery(".erya").show()
            }
        }
         //图片预览
        var img=['id','cr','car','fund']
        for(var i in img){
            jquery("."+img[i]+"imgadd").on('click',function(){
                var src=jquery(this).attr("src")
                if(src==''){}else{
                    jquery(".previewbox").find(".previewimg").attr("src",src)
                    jquery(".previewbox").show()
                }
            })
        }
       

    }

    //钉钉完善时间获取
     async getddtime() {
        let res = await util.rjax({
            url: '/productUpdate/getListById?id='+ util.getQuery().id,
            type: "get"
        })
        if (res) {
            this.setState({ ddtime: res.data.rows })
        }
    }

   // 中止报单
    async cancel() {
        let res = await util.rjax({
            url: '/otherProductStatus/end?id=' + util.getQuery().id + "&endReason=" + jquery("textarea").val(),
            type: "post"
        })
        if (res) {
            window.location.href = `./defbbus.html`
        }
    }

    async gocancel(e) {
        jquery(".dialogcancel").show()
    }

    async cancelyes() {
        var text = jquery("textarea").val()
        if (jquery("textarea").val() == '') {
            layer.open({
                content: "取消原因不能为空",
                btn: "好的"
            })
        } else {
            this.cancel()
            jquery(".dialogcancel").hide()
        }
    }

    async cancelno() {
        jquery(".dialogcancel").hide()
        this.setState({ endid: '' })
    }

    render() {
         let ddtimelist = this.state.ddtime.map((item, index) => {
            return (
                <div key={index}>
                    <span className="l">第{index+1}次钉钉完善资料时间</span>
                    <span className="r">{item.submitTime}</span>      
                </div>
            )
         })
        return (
            <div className="declaration">
               <div className="previewbox">
                    <img className="previewimg" src=""/>
               </div>
                <div className="card pro">
                 
                    <div className="inputbox">
                        <div>
                            <span className="l">贷款类型</span>
                            <span className="r">{this.state.productType[this.state.declardata.productType]}</span>
                        </div>
                        <div>
                            <span className="l">申请产品</span>
                            <span className="r">{this.state.declardata.productName}</span>      
                        </div>
                        {ddtimelist}
                    </div>
                </div>
                <div className="card loantype2">
                    <h4>客户基本信息</h4>
                    <div className="inputbox">
                        <div>
                            <span className="l">姓名</span>
                            <span className="r">{this.state.declardata.name}</span>  
                        </div>
                        <div>
                            <span className="l">手机号</span>
                            <span className="r">{this.state.declardata.phone}</span>  
                        </div>
                        <div>
                            <span className="l">婚姻状况</span>
                            <span className="r">{this.state.marry[this.state.declardata.marry]}</span>  
                        </div>
                        <div>
                            <span className="l">工作单位名称</span>
                            <span className="r">{this.state.declardata.company}</span>  
                        </div>
                       <div>
                            <span className="l">工作单位性质</span>
                            <span className="r">{this.state.work[this.state.declardata.work]}</span>  
                        </div>
                        <div>
                            <span className="l">社保缴存期限(月)</span>
                            <span className="r">{this.state.declardata.sbMonth}</span> 
                        </div>
                         <div>
                            <span className="l">当前单位工作期限(月)</span>
                            <span className="r">{this.state.declardata.workMonth}</span> 
                        </div>
                         <div>
                            <span className="l">打卡工资(月度)</span>
                            <span className="r">{this.state.declardata.salary}</span> 
                        </div>
                         <div>
                            <span className="l">贷款用途</span>
                            <span className="r">{this.state.declardata.loanUse}</span> 
                        </div>
                        <div>
                            <span className="l">还款来源</span>
                            <span className="r">{this.state.declardata.paySource}</span> 
                        </div>
                        <div>
                            <span className="l">借款金额(万元)</span>
                            <span className="r">{this.state.declardata.loanTotal}</span> 
                        </div>
                        <div>
                            <span className="l">借款期限(月)</span>
                            <span className="r">{this.state.declardata.loanMonth}</span> 
                         </div>  
                         <div className="iduploadbox">
                            <p>身份证(正反面上传)</p>
                            <div className="iduploadimg">
                                {this.state.idcardimg.map((item, index) =>
                                    <img key={index} className="idimgadd" src={item}/>
                                )}
                            </div>
                        </div> 
                        <div className="cruploadbox">
                            <p>征信报告(不超过5项)</p>
                            <p className="desc">必须上传第一、二页及查询月；自选上传:逾期月</p>
                            <div className="cruploadimg">
                                {this.state.creditimg.map((item, index) =>
                                    <img  key={index} className="crimgadd" src={item}/>
                                )}
                            </div>
                        </div>
                    </div>
                </div>

                 <div className="card loantype1" style={{display:'none'}}>
                    <h4>车产信息</h4>
                    <div className="inputbox">
                        <div>
                            <span className="l">车牌号</span>
                            <span className="r">{this.state.declardata.carNumber}</span> 
                        </div>
                        <div>
                            <span className="l">上牌年限(月)</span>
                            <span className="r">{this.state.declardata.carYear}</span> 
                        </div>
                         <div className='caruploadbox'>
                            <p>行驶证</p>
                            <div className='caruploadimg'>
                                <img className="carimgadd" src={this.state.declardata.carCard}/>
                            </div>
                        </div>
                    </div>
                </div>

                 <div className="card loantype4" style={{display:'none'}}>
                    <h4>公积金信息</h4>
                    <div className="inputbox">
                        <div>
                            <span className="l">缴存地</span>
                            <span className="r">{this.state.declardata.gjjAddress}</span> 
                        </div> 
                        <div>
                            <span className="l">双边汇款额(元)</span>
                            <span className="r">{this.state.declardata.gjjMoney}</span> 
                         </div>  
                        <div className='funduploadbox'>
                            <p>选择上传图片（可选填）</p>
                             <p className="funddesc">可上传我的南京</p>
                            <div className='funduploadimg'>
                                <img className="fundimgadd" src={this.state.declardata.gjjImage}/>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="card house loantype0" style={{display:'none'}}>
                    <h4>房产信息</h4>
                    <div className="inputbox">
                        <div>
                            <span className="l">房产地址</span>
                            <span className="r">{this.state.declardata.houseAddress}</span> 
                        </div>
                         <div>
                            <span className="l">按揭／全款</span>
                            <span className="r">{this.state.housePay[this.state.declardata.housePay]}</span> 
                        </div>
                        <div>
                            <span className="l">房产价值(万元)</span>
                            <span className="r"><i>{this.state.declardata.houseMin}</i>~<i>{this.state.declardata.houseMax}</i></span>
                        </div>
                        <div>
                            <span className="l">面积(平方米)</span>
                            <span className="r">{this.state.declardata.houseArea}</span> 
                        </div>
                         <div>
                            <span className="l">房产类型</span>
                           <span className="r">{this.state.houseType[this.state.declardata.houseType]}</span> 
                        </div>
                        <div>
                            <span className="l">其他房产类型</span>
                            <span className="r">{this.state.declardata.houseOtherType}</span> 
                        </div>
                         <div>
                            <span className="l">抵押类型</span>
                            <span className="r">{this.state.houseMortgage[this.state.declardata.houseMortgage]}</span> 
                        </div>
                         <div className="oneya" style={{display:'none'}}>
                            <span className="l">一押需求金额</span>
                            <span className="r">{this.state.declardata.houseMortgageMoney}</span> 
                        </div>
                         <div className="erya" style={{display:'none'}}>
                            <span className="l">一押余额</span>
                            <span className="r">{this.state.declardata.houseMoney}</span> 
                        </div>
                        <div className='houseuploadbox'>
                            <p>房产证上传(产权所有人单页)</p>
                            <div className='houseuploadimg'>
                                <img className="houseimgadd" src={this.state.declardata.houseCard}/>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="card loantype3" style={{display:'none'}}>
                    <h4>保单信息</h4>
                    <div className="inputbox">
                        <div>
                            <span className="l">投保人姓名</span>
                            <span className="r">{this.state.declardata.guaranteeUser}</span> 
                        </div>
                        <div>
                            <span className="l">年度汇缴额(元)</span>
                            <span className="r">{this.state.declardata.guaranteeMoney}</span> 
                        </div>
                        <div>
                            <span className="l">汇缴期限(月)</span>
                            <span className="r">{this.state.declardata.guaranteeMonth}</span> 
                        </div>
                    </div>
                </div>

              
                <div  className="dobblebtn">
                    <p className="cancelbtn" onClick={this.gocancel.bind(this)}>中止报单</p>
                    <p className="editbtn" onClick={this.goedit.bind(this)}>处理报单</p>
                </div>

                  {/* 取消原因弹框 */}
                <div className="dialogcancel">
                    <div className="iscancelbox">
                        <span className="canceltip">取消原因</span>
                        <textarea maxLength="50" name="" placeholder="文字不超过50个字" id="" cols="" rows=""></textarea>
                        {/* <span><span id="textNum">0</span>/100</span> */}
                        <p>
                            <span className="yes" onClick={this.cancelno.bind(this)}>取消</span>
                            <i></i>
                            <span className="no" onClick={this.cancelyes.bind(this)}>确定</span>
                        </p>
                    </div>
                </div>
            </div>
        )
    }
}

ReactDom.render(<Declar />, document.getElementById('app'))